import React from 'react';
import {View, Text, StyleSheet, Platform} from 'react-native';
import {connect} from 'react-redux';
import {Gender} from '../../reducers/order-form';
import {formatDate, getRealSize} from '../../utils';
import {I18n} from '../../reducers/intl';

class BaseScreen extends React.Component {
  static navigationOptions = () => ({
    headerBackTitleStyle: Platform.OS === 'ios' && {
      height: 0,
      width: 0,
    },
    title: I18n.t('page.title.previewBase'),
  });

  render() {
    const {form} = this.props;
    return (
      <View style={Styles.container}>
        <PatientCard {...form} />
        <OrderCard {...form} />
      </View>
    );
  }
}

const PatientCard = props => (
  <View style={Styles.box}>
    <View style={Styles.row}>
      <View style={Styles.block}>
        <Text style={Styles.title}>{I18n.t('order.props.patient.name')}</Text>
        <Text style={Styles.value} numberOfLines={1}>
          {props.patientName}
        </Text>
      </View>
      <View style={Styles.block}>
        <Text style={Styles.title}>{I18n.t('order.props.patient.gender')}</Text>
        <Text style={Styles.value}>
          {props.patientGender &&
            I18n.t(`options.gender.${props.patientGender}`)}
        </Text>
      </View>
    </View>
    <View style={Styles.innerRow}>
      <View style={Styles.block}>
        <Text style={Styles.title}>{I18n.t('order.props.patient.age')}</Text>
        <Text style={Styles.value}>{props.patientAge}</Text>
      </View>
      <View style={Styles.block}>
        <Text style={Styles.title}>{I18n.t('order.props.patient.from')}</Text>
        <Text style={Styles.value}>{props.owners}</Text>
      </View>
    </View>
  </View>
);

const OrderCard = props => (
  <View style={Styles.box}>
    <View style={Styles.row}>
      <View style={Styles.block}>
        <Text style={Styles.title}>{I18n.t('order.props.selections')}</Text>
        <Text style={Styles.value} numberOfLines={1}>
          {props.selections && props.selections.map(s => s.name).join(',')}
        </Text>
      </View>
      <View style={Styles.block}>
        <Text style={Styles.title}>{I18n.t('order.props.deliveryDay')}</Text>
        <Text style={Styles.value}>{formatDate(props.deliveryDay)}</Text>
      </View>
    </View>
  </View>
);

const mapStateToProps = state => ({
  user: state.user,
  form: state.orderForm,
});

export default connect(mapStateToProps, null)(BaseScreen);

const Styles = StyleSheet.create({
  container: {},
  box: {
    marginHorizontal: getRealSize(15),
    padding: getRealSize(20),
    backgroundColor: '#f7f7f7',
    marginTop: getRealSize(15),
    borderRadius: getRealSize(4),
  },
  row: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  innerRow: {
    marginTop: getRealSize(20),
    flexDirection: 'row',
    alignItems: 'center',
  },
  block: {
    flex: 1,
    marginRight: getRealSize(12),
  },
  title: {
    fontSize: getRealSize(12),
    fontWeight: '400',
    color: '#757575',
  },
  value: {
    marginTop: getRealSize(12),
    fontSize: getRealSize(16),
    fontWeight: 'bold',
    color: '#333',
  },
});
